<template>
    <view class="container">
        <!-- 顶部 Tab 切换 -->
        <view class="tab-header">
            <view class="tab-item" 
                  v-for="(tab, index) in tabs" 
                  :key="index"
                  :class="{ active: currentTab === index }"
                  @tap="switchTab(index)">
                <text class="tab-text">{{tab.name}}</text>
                <text class="tab-count">({{tab.count}})</text>
            </view>
        </view>

        <!-- 列表内容 -->
        <view class="member-list">
            <view class="member-item" v-for="(member, index) in currentList" :key="index">
                <image class="member-avatar" :src="member.avatar || '/static/avatars/default-avatar.jpg'" mode="aspectFill"></image>
                <view class="member-info">
                    <text class="member-name">{{member.nickName}}</text>
                    <text class="signup-time">{{formatTime(member.createTime)}}</text>
                    <text class="reject-reason" v-if="member.status === 'rejected' && member.remark">
                        拒绝原因：{{member.remark}}
                    </text>
                </view>
                <!-- 审批操作按钮 -->
                <view class="action-btns" v-if="member.status === 'pending'">
                    <button class="reject-btn" @tap="showRejectModal(member)">拒绝</button>
                    <button class="approve-btn" @tap="handleApprove(member)">同意</button>
                </view>
                <!-- 审批状态标签 -->
                <view class="status-tag" :class="member.status" v-else>
                    {{statusText[member.status]}}
                </view>
            </view>
        </view>

        <!-- 拒绝原因输入弹窗 -->
        <view class="reject-modal" v-if="showRejectInput">
            <view class="modal-mask" @tap="closeRejectModal"></view>
            <view class="modal-content">
                <view class="modal-title">填写拒绝原因</view>
                <textarea class="reject-input" 
                    v-model="rejectReason" 
                    placeholder="请输入拒绝原因（选填）"
                    maxlength="200"
                ></textarea>
                <view class="modal-btns">
                    <button class="cancel-btn" @tap="closeRejectModal">取消</button>
                    <button class="confirm-btn" @tap="handleReject">确定</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { getSignupList, updateSignup } from '@/api/youqiu/signups.js'

export default {
    data() {
        return {
            activityId: '',
            currentTab: 0,
            showRejectInput: false,
            rejectReason: '',
            currentMember: null,
            tabs: [
                { name: '待审批', status: 'pending', count: 0 },
                { name: '已通过', status: 'approved', count: 0 },
                { name: '已拒绝', status: 'rejected', count: 0 }
            ],
            memberList: [],
            statusText: {
                pending: '待审批',
                approved: '已通过',
                rejected: '已拒绝'
            }
        }
    },
    computed: {
        currentList() {
            return this.memberList.filter(member => 
                member.status === this.tabs[this.currentTab].status
            )
        }
    },
    onLoad(options) {
        this.activityId = options.id
        this.getSignupList()
    },
    methods: {
        async getSignupList() {
            try {
                const res = await getSignupList({ activityId: this.activityId })
                this.memberList = res.rows || []
                // 更新tab计数
                this.tabs.forEach(tab => {
                    tab.count = this.memberList.filter(m => m.status === tab.status).length
                })
            } catch (err) {
                uni.showToast({
                    title: '获取报名列表失败',
                    icon: 'none'
                })
            }
        },
        switchTab(index) {
            this.currentTab = index
        },
        formatTime(timestamp) {
            if (!timestamp) return ''
            const date = new Date(timestamp)
            return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes()}`
        },
        showRejectModal(member) {
            this.currentMember = member
            this.showRejectInput = true
            this.rejectReason = ''
        },
        closeRejectModal() {
            this.showRejectInput = false
            this.currentMember = null
            this.rejectReason = ''
        },
        async handleApprove(member) {
            try {
                await updateSignup({
                    id: member.id,
                    status: 'approved'
                })
                uni.showToast({
                    title: '已通过',
                    icon: 'success'
                })
                this.getSignupList()
            } catch (err) {
                uni.showToast({
                    title: '操作失败',
                    icon: 'none'
                })
            }
        },
        async handleReject() {
            if (!this.currentMember) return
            try {
                await updateSignup({
                    id: this.currentMember.id,
                    status: 'rejected',
                    remark: this.rejectReason
                })
                uni.showToast({
                    title: '已拒绝',
                    icon: 'success'
                })
                this.closeRejectModal()
                this.getSignupList()
            } catch (err) {
                uni.showToast({
                    title: '操作失败',
                    icon: 'none'
                })
            }
        }
    }
}
</script>

<style>
.container {
    padding: 20rpx;
}

.tab-header {
    display: flex;
    background: #fff;
    padding: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 12rpx;
}

.tab-item {
    flex: 1;
    text-align: center;
    font-size: 28rpx;
    color: #666;
}

.tab-item.active {
    color: #4CAF50;
    font-weight: bold;
}

.tab-count {
    font-size: 24rpx;
    color: #999;
    margin-left: 8rpx;
}

.member-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    background: #fff;
    margin-bottom: 20rpx;
    border-radius: 12rpx;
}

.member-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
}

.member-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.member-name {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
}

.signup-time {
    font-size: 24rpx;
    color: #999;
    margin-top: 8rpx;
}

.reject-reason {
    font-size: 24rpx;
    color: #f44336;
    margin-top: 8rpx;
    line-height: 1.4;
}

.action-btns {
    display: flex;
    gap: 20rpx;
}

.reject-btn, .approve-btn {
    padding: 12rpx 30rpx;
    border-radius: 8rpx;
    font-size: 26rpx;
}

.reject-btn {
    background: #f5f5f5;
    color: #666;
}

.approve-btn {
    background: #4CAF50;
    color: #fff;
}

.status-tag {
    font-size: 24rpx;
    padding: 8rpx 20rpx;
    border-radius: 4rpx;
}

.status-tag.pending {
    background: #fff5e6;
    color: #ff9800;
}

.status-tag.approved {
    background: #e8f5e9;
    color: #4caf50;
}

.status-tag.rejected {
    background: #ffebee;
    color: #f44336;
}

/* 拒绝原因弹窗样式 */
.reject-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.modal-content {
    position: relative;
    width: 600rpx;
    background: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
}

.modal-title {
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
}

.reject-input {
    width: 100%;
    height: 200rpx;
    background: #f5f5f5;
    border-radius: 8rpx;
    padding: 20rpx;
    font-size: 28rpx;
    margin-bottom: 30rpx;
}

.modal-btns {
    display: flex;
    gap: 20rpx;
}

.cancel-btn, .confirm-btn {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 8rpx;
    font-size: 28rpx;
}

.cancel-btn {
    background: #f5f5f5;
    color: #666;
}

.confirm-btn {
    background: #4CAF50;
    color: #fff;
}
</style> 